package com.csw.compose.ui.module.component.container

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.staggeredgrid.LazyHorizontalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage


@Preview(heightDp = 2000)
@Composable
fun GridPagePreview() {
    BasePage({}, "网格列表（Grid）") {
        GridPage()
    }
}

class GridPageData {
    companion object : Destination("GridPage")
}

/**
 *[参考](https://developer.android.google.cn/develop/ui/compose/lists?hl=zh-cn)
 */
@Composable
fun GridPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("网格列表，对比列表，可以展示更多的数据")

        NormalSpacer()
        LazyVerticalGrid(
            columns = GridCells.Fixed(3),
            Modifier
                .fillMaxWidth()
                .height(360.dp)
        ) {
            items(10) {
                Box(
                    Modifier
                        .fillMaxWidth()//宽度填满单元格
                        .aspectRatio(1.0f)//宽高比设置为1，即1:1，此时高度由宽度决定
                        .alpha(0.1f * it)
                        .background(Color.Red)
                )
            }
        }
        UlItem("LazyVerticalGrid")
        LabelText("纵向网格布局，改变排布方式而已，可设置的参数与LazyVerticalList基本一致，延迟组件都具备延迟创建item与复用item的优化。")
        OlItem(1, "columns")
        LabelText("设置列划分方式")
        LabelText("- Fixed 填充，指定列数，平分空间")
        LabelText("- Adaptive 动态，指定item最小宽度，根据容器宽度计算可放置列数，然后将空间平分给所有列")
        LabelText("- FixedSize 指定item宽度，根据容器自动计算可放置列数，剩余空间作为列间距")

        LargeSpacer()
        LazyHorizontalGrid(
            rows = GridCells.Fixed(3),
            Modifier
                .fillMaxWidth()
                .height(360.dp)
        ) {
            items(10) {
                Box(
                    Modifier
                        .fillMaxHeight()
                        .aspectRatio(1.0f)
                        .alpha(0.1f * it)
                        .background(Color.Red)
                )
            }
        }
        UlItem("LazyHorizontalGrid")
        LabelText("横向网格布局")

        LargeSpacer()
        val randomSize = remember {
            Array(10){
                140.dp + (Math.random() * 30).dp
            }
        }
        LazyVerticalStaggeredGrid(
            columns = StaggeredGridCells.Fixed(3),
            Modifier
                .fillMaxWidth()
                .height(360.dp)
        ) {
            randomSize.forEachIndexed { index, dp ->
                item {
                    Box(
                        Modifier
                            .fillMaxWidth()//宽度填满单元格
                            .height(dp)//随机高度
                            .alpha(0.1f * index)
                            .background(Color.Red)
                    )
                }
            }
        }
        UlItem("LazyVerticalStaggeredGrid")
        LabelText("纵向流式布局，item优先放置在所有列中最顶部的空位，若位置一样高，则优先从开始位置放置")

        LargeSpacer()
        LazyHorizontalStaggeredGrid(
            rows = StaggeredGridCells.Fixed(3),
            Modifier
                .fillMaxWidth()
                .height(360.dp)
        ) {
            randomSize.forEachIndexed { index, dp ->
                item {
                    Box(
                        Modifier
                            .fillMaxHeight()
                            .width(dp)
                            .alpha(0.1f * index)
                            .background(Color.Red)
                    )
                }
            }
        }
        UlItem("LazyHorizontalGrid")
        LabelText("横向流式布局")
    }
}